import React, { Component } from 'react';
import { queryDeviceOutdoorFireHydrantException } from '../service';
import styled from '../styled.less';
import { Ceil } from '@/components/Ceil';

export default class WaterHeaderLeft extends Component {

  state = {
    blockShotCount: [0, 0, 0],
    hydraulicPressureCount: [0, 0, 0],
    valveOpenCount: [0, 0, 0],
    exceptionCount: [0, 0, 0],
  };

  componentWillMount() {
    queryDeviceOutdoorFireHydrantException().then(data => {
      if (data) {
        this.setState({
          blockShotCount: data.blockShotCount ? Object.values(data.blockShotCount) : [0, 0, 0],
          hydraulicPressureCount: data.hydraulicPressureCount ? Object.values(data.hydraulicPressureCount) : [0, 0, 0],
          valveOpenCount: data.valveOpenCount ? Object.values(data.valveOpenCount) : [0, 0, 0],
          exceptionCount: data.exceptionCount ? Object.values(data.exceptionCount) : [0, 0, 0],
        })
      }
    })
  }

  render() {
    const { hydraulicPressureCount, valveOpenCount, blockShotCount, exceptionCount } = this.state;
    return (
      <div className="head-left">
        <Ceil
          heads={['', '本日/次', '本周/次', '本月/次']}
          subHeads={['水压值异常', "阀门被打开", "盖帽倾倒", "水位异常"]}
          data={[[...hydraulicPressureCount], [...valveOpenCount], [...blockShotCount], [...exceptionCount]]}
        />
      </div>
    )
  }
}
